<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
import { onMounted, ref } from "vue";
import { fetchGetActivityNumberRank } from '@/api/screen/activity'
import { filterDate } from "@/utils/format";

let listData = reactive([])
const getNumberRank = async () => {
  const res = await fetchGetActivityNumberRank()
  listData = res.data
  res.data.forEach((item: any) => {
    if (item.status == 0) {
      if (item.examine == 0) {
        woman[0]++
      } else {
        man[0]++
      }
    }
    else if (item.status == 1) {
      if (item.examine == 0) {
        woman[1]++
      } else {
        man[1]++
      }
    }
    else if (item.status == 2) {
      if (item.examine == 0) {
        woman[2]++
      } else {
        man[2]++
      }
    }
    else if (item.status == 3) {
      if (item.examine == 0) {
        woman[3]++
      } else {
        man[3]++
      }
    }
    else if (item.status == 4) {
      if (item.examine == 0) {
        woman[4]++
      } else {
        man[4]++
      }
    }
    else if (item.status == 5) {
      if (item.examine == 0) {
        woman[5]++
      } else {
        man[5]++
      }
    }
  })
}

onMounted(() => {
  getNumberRank()
})

let man = reactive([0, 0, 0, 0, 0, 0,]) // 免审批
let woman = reactive([0, 0, 0, 0, 0, 0]) // 需要审批
let total: any[] = []
man.forEach((item, index) => {
  let max = item > man[index] ? index : man[index]
  max = max > 0 ? max * 1.5 : 4
  total.push(max)
})
const indicator = [
  {
    name: '报名未开始',
    max: total[0],
  },
  {
    name: '报名中',
    max: total[1],
  },
  {
    name: '报名已结束',
    max: total[2],
  },
  {
    name: '活动未开始',
    max: total[3],
  },
  {
    name: '活动进行中',
    max: total[4],
  },
  {
    name: '活动已结束',
    max: total[5],
  }
]
const option = reactive({
  backgroundColor: '#0B0D13',
  tooltip: {
    trigger: 'item',
  },
  color: ['#27E4AA', '#EEBA57'],
  legend: {
    icon: 'roundRect',
    top: '90%',
    show: true,
    padding: [3, 5],
    // right: '50',
    y: '1',
    center: 0,
    itemWidth: 20,
    itemHeight: 10,
    itemGap: 26,
    z: 3,
    // orient: 'horizontal',
    data: ['免审批', '需要审批'],
    textStyle: {
      fontSize: 12,
      color: '#F1F7FF',
    },
  },
  radar: {
    center: ['50%', '45%'], // 外圆的位置
    radius: '55%',
    name: {
      textStyle: {
        color: '#fff',
        fontSize: 15,
        fontWeight: 400,
        fontFamily: 'PingFangSC-Regular,PingFang SC',
        fontStyle: 'italic',
      },
    },
    // TODO:
    indicator: indicator,
    splitArea: {
      // 坐标轴在 grid 区域中的分隔区域，默认不显示。
      show: true,
      areaStyle: {
        // 分隔区域的样式设置。
        color: ['#00224A', '#00224A', '#00224A', '#00224A', '#00224A'], // 画布颜色 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
      },
    },
    axisLine: {
      // 指向外圈文本的分隔线样式
      lineStyle: {
        color: 'rgba(255,255,255,0.2)',
      },
    },
    splitLine: {
      lineStyle: {
        type: 'solid',
        color: ['#1781BA', '#1781BA'], // 分隔线颜色
        width: 1, // 分隔线线宽
      },
    },
  },
  series: [
    {
      type: 'radar',
      symbolSize: 5,
      data: [
        {
          // TODO:
          value: man,
          name: '免审批',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: '#304E78', // 0% 处的颜色
                },
                {
                  offset: 0.15, color: '#387C8E', // 100% 处的颜色
                },
                {
                  offset: 0.75, color: '#43BDAC', // 100% 处的颜色
                },
                {
                  offset: 1, color: '#4BF3C5', // 100% 处的颜色
                }],
                global: false, // 缺省为 false
              },
            },
          },
          itemStyle: { // 折线拐点标志的样式。
            normal: { // 普通状态时的样式
              lineStyle: {
                width: 1,
              },
              opacity: 0.3,
            },
            emphasis: { // 高亮时的样式
              lineStyle: {
                width: 5,
              },
              opacity: 0,
            },
          },
        },
        {
          // TODO:
          value: woman,
          name: '需要审批',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: '#3A5176', // 0% 处的颜色
                },
                {
                  offset: 0.15, color: '#605845', // 100% 处的颜色
                },
                {
                  offset: 0.75, color: '#BE9138', // 100% 处的颜色
                },
                {
                  offset: 1, color: '#F5B130', // 100% 处的颜色
                }],
                global: false, // 缺省为 false
              },
            },
          },
          itemStyle: { // 折线拐点标志的样式。
            normal: { // 普通状态时的样式
              lineStyle: {
                width: 1,
              },
              opacity: 0.3,
            },
            emphasis: { // 高亮时的样式
              lineStyle: {
                width: 5,
              },
              opacity: 0,
            },
          },
        }
      ],
    }
  ],
});
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
